<%= form_with(model: visualization, html: {
  class: 'mt-4 flex flex-col gap-2',
  data: {
    controller: 'form',
    "visualization-favorite-labels-list": visualization.id
  }} ) do |f| %>
  <% 6.times do |i| %>
    <div class="px-4 flex gap-2 items-stretch">
      <span class="flex items-center bg-base-100 w-4 text-center text-base-content text-xs font-bold"><%= i + 1 %></span>
      <input type="text" name="visualization[favorite_issue_labels][]"
        data-action="change->form#submit"
        data-visualization--favorite-issue-labels-target="favoriteLabelInput"
        value="<%= visualization.favorite_issue_labels[i] %>"
        class="input input-sm">
    </div>
  <% end %>
  <p class="px-4 mt-2 font-base">
    <span class="text-primary font-bold text-xs"><i class="ti ti-sparkles"></i> <%= t(".pro_tip.title") %></span>
    <br/>
    <span class="text-base-content text-xs text-italic"><%= t(".pro_tip.description") %></span>
  </p>
  <div class="px-4 py-2 border-t border-base-300 flex items-center justify-end text-xs bg-base-100">
    <button class="btn-sm btn btn-primary" data-action="click->dropdown#toggle"><%= t(:save, scope: :actions) %></button>
  </div>
<% end %>